<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="./manifest.json">
    <link rel="stylesheet" href="./css/flipclock.css">
    <style>
      html, body {
        margin: 0;
        height: 100%;
        width: 100%;
        background: black;
        overflow: hidden;
      }
      .clock {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        filter: invert(100%);
        transform: scale(1.2);
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	  <script src="./js/flipclock.js"></script>
    <script src="./js/NoSleep.js"></script>
    <title>Clock</title>
</head>
<body>
    <div class="clock"></div>
    <script>
      const baseSize = window.innerWidth / 750
      document.body.parentElement.style.fontSize = baseSize + 'px'
    </script>
    <script>
      var noSleep = new NoSleep();
      document.addEventListener('click', function enableNoSleep() {
        alert('nosleep')
        document.removeEventListener('click', enableNoSleep, false);
        noSleep.enable();
      }, false);
    </script>
		<script type="text/javascript">
			var clock;

			$(document).ready(function() {
				clock = $('.clock').FlipClock({
					clockFace: 'TwentyFourHourClock',
					showSeconds: false
				});
			});
		</script>
</body>
</html>